@import "../utils";

.rio-switch {
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;

    // This reserves space for the outline so the switch doesn't change size
    // when it's enabled or disabled
    padding: 0.15rem;

    // This div is centered in the allocated space
    & > rio-pressable-element {
        pointer-events: auto;
        position: relative;

        width: 2.8rem;
        height: 1.6rem;

        background-color: var(--rio-global-disabled-bg);
        border-radius: $infinite-corner-radius;

        transition:
            all 0.3s ease-in-out,
            outline 0.15s linear;
    }

    svg {
        width: 100%;
        height: 100%;
        margin-top: 0.1rem;

        transition: fill 0.1s ease-in-out;
    }

    .knob {
        position: absolute;

        top: 0.2rem;
        left: 0.2rem;
        width: 1.2rem;
        height: 1.2rem;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: $infinite-corner-radius;
        background-color: var(--rio-global-disabled-bg-variant);
        --icon-color: transparent;

        transition: all 0.3s cubic-bezier(0.2, 0.9, 0.35, 1.15);
    }

    &:active .knob {
        width: 1.8rem;
    }
}

.rio-switch.is-on {
    & > rio-pressable-element {
        background-color: var(--rio-local-level-2-bg);
        outline: 0rem solid var(--rio-global-disabled-bg-variant);
    }

    .knob {
        left: 1.4rem;
        background-color: var(--rio-local-bg);
        --icon-color: var(--rio-local-level-2-bg);
    }

    &:active .knob {
        left: 0.8rem;
    }
}

.rio-switch.rio-switcheroo-disabled {
    opacity: 0.8;

    & > rio-pressable-element {
        background-color: transparent !important;
        outline: 0.15rem solid var(--rio-global-disabled-bg-variant) !important;
    }

    .knob {
        background-color: var(--rio-global-disabled-bg-variant) !important;
    }
}

.rio-switch.rio-switcheroo-disabled.is-on > div > .knob {
    --icon-color: var(--rio-global-disabled-fg) !important;
}
